<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="40%"
    top="10vh"
    :before-close="closeDialogHandle"
    :close-on-click-modal="false"
    class="game-flow"
  >
    <el-timeline class="flow-line">
      <el-timeline-item placement="top" v-for="flow in flowList" :key="flow.id" :color="theme">
        <el-card shadow="hover">
          <div class="mb10">
            <span>标题: {{ flow.title }}流水</span>
          </div>
          <div v-if="flow.content" class="mb10">
            <span>内容:</span>
            <span>{{ flow.content }}</span>
          </div>
          <el-row>
            <el-col v-if="flow.createUser" :span="12">
              <span>创建用户: {{ flow.createUser }}</span>
            </el-col>
            <el-col :span="12">
              <span>创建时间: {{ flow.createTime }}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <span slot="footer">
      <el-button @click="closeDialogHandle">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 弹出框标题
        title: undefined,
        // 用户流水列表
        flowList: [],
        // 数据是否加载[true-加载 false-不加载]
        dataLoad: false,
      }
    },
    computed: {
      // 系统主题
      theme() {
        return this.$store.state.settings.theme
      }
    },
    methods: {
      /**
       * 初始化弹出框方法
       * @param {string} id   主键
       * @param {number} type 流水类型[0-游戏奖品流水 1-游戏用户流水]
       */
      initDialog(id, type) {
        // 打开弹出框
        this.visible = true;

        if (type === 0) {
          this.title = '游戏奖品流水';

          this.getPrizeFlowList(id);
        } else if (type === 1) {
          this.title = '游戏用户流水';

          this.getUserFlowList(id);
        }
      },
      /**
       * 获取游戏奖品流水方法
       * @param {string} prizeId 游戏奖品主键
       */
      getPrizeFlowList(prizeId) {
        // 开始加载
        this.dataLoad = true;
        this.$axios.$get('/game-prize-flow/list', { params: { prizeId }})
          .then(({ data }) => {
            this.flowList = data;
          })
          .catch(() => {})
          .finally(() => {
            // 加载结束
            this.dataLoad = false;
          });
      },
      /**
       * 获取游戏用户流水方法
       * @param {string} id 游戏用户主键
       */
      getUserFlowList(id) {
        // 开始加载
        this.dataLoad = true;
        this.$axios.$get('/game-user-flow/list', { params: { id }})
          .then(({ data }) => {
            this.flowList = data;
          })
          .catch(() => {})
          .finally(() => {
            // 加载结束
            this.dataLoad = false;
          });
      },
      /**
       * 关闭弹出框方法
       */
      closeDialogHandle() {
        // 清理数据
        this.flowList = [];

        this.$nextTick(() => {
          // 关闭弹出框
          this.visible = false;
          this.title = undefined;
        });
      },
    }
  }
</script>

<style scoped>
  .game-flow .flow-line {
    height: 400px;
    padding-left: 5px;
    overflow: auto;
  }
  .game-flow .flow-line .mb10 {
    margin-bottom: 10px;
  }
</style>
